<template>
    <JsonEditorVue v-model="currentdata" v-bind="{/* 局部 props & attrs */ }" />
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch, unref } from 'vue';
import JsonEditorVue from 'json-editor-vue';
import { useJsonStore } from "@/stores/json";

export default defineComponent({
    props: ["data"],
    components: { JsonEditorVue },
    setup(props, { emit, attrs }) {
        var store = useJsonStore();

        //待解决，由于vanilla-jsoneditor在解析ParamModel时无法解析tree，所以折中了下先还原为json，再实例化
        // var ns = JSON.stringify(props.data);
        // const currentdata = ref(JSON.parse(ns));
        // watch(() => props.data, (n, o) => {
        //     var s = JSON.stringify(n);
        //     currentdata.value = JSON.parse(s);
        // })
        var ns = JSON.stringify(store.currentJsonData);
        const currentdata = ref(JSON.parse(ns));
        watch(() => store.currentJsonData, (n, o) => {
            var s = JSON.stringify(n);
            currentdata.value = JSON.parse(s);
        })
        // console.log(unref(props.data));
        return { currentdata }
    }
});
</script>

<style scoped>
.svelte-jsoneditor-vue {
    display: flex;
    flex: 1;
}
</style>